<template>
	<NavBar class="nav-search" 
		:bgLeftColor="'#DCDFFE'" 
		:boxPadding="'20rpx 0'" 
		:bgRightColor="'#CCDFFF'"
	>
		<template #lf>
			<navigator class="left item" open-type="navigateBack" hover-class="none">
				<u-icon name="arrow-left" size="20" color="#000"></u-icon>
			</navigator>
		</template>
		<template #lc>
			<view class="center item">
				<u-input class="search" v-model="data" placeholder="请输入你想去的城市" border="none">
					<template slot="prefix">
						<u-icon name="search" size="20" color="#000" @click="onSearch"></u-icon>
					</template>
					<template slot="suffix">
						<u-icon name="close-circle-fill" size="20" color="#000" @click="data = ''"></u-icon>
					</template>
				</u-input>
			</view>
		</template>
		<template #lr>
			<view class="right item"></view>
		</template>
	</NavBar>
</template>

<script>
	import NavBar from "@/components/common-nav/common-nav.vue" 
	export default {
		name:"nav-search",
		props: {
			search: {
				// 搜索内容(默认为空)
				type: String,
				default: "",
			},
		},
		components: {
			NavBar
		},
		data() {
			return {
				data:this.search
			};
		},
		methods:{
			// 搜索数据
			onSearch(){
				this.$emit("search",this.data)
			}
		}
	}
</script>

<style lang="scss">
.nav-search{
	.item{
		display: flex;
		justify-content: center;
	}
	.left{
		width: 80rpx;
		image{
			width: 40rpx;
		}
	}
	.center{
		width: calc(100% - 100rpx);
		image{
			width: 30rpx;
		}
		.search{
			background-color: #ffffff;
			background-size: 100% 100%;
			padding:13rpx 30rpx 13rpx 40rpx!important;
		}
	}
}
</style>